<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
    <style type="text/css">
      .bg {
        background: #f00;
      }
      .font {
        font-size: 40px;
      }
    </style>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="example">
      <!-- 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀 -->

      <div v-bind:style="{ color: '#ccc', fontSize: 90 + 'px' }">
        {{ message }}
      </div>

      <div v-bind:style="style1">{{ message }}</div>

      <div v-bind:style="[style1, style2]">{{ message }}</div>
    </div>

    <script>
      //数据
      let data = {
        message: 'miaov',
        style1: {
          color: '#ff0',
          fontSize: '30px'
        },
        style2: {
          background: '#f00'
        }
      }

      //vm实例
      var vm = new Vue({
        el: '#example',
        data: data
      })
    </script>
  </body>
</html>
